<template>
    <div class="login-bg">
        <div class="wrap">
            <div class="container">
                <h1>管理平台</h1>
                <form>
                    <input v-model="userName" type="text" placeholder="用户名" />
                    <input v-model="password" type="password" placeholder="密码" @keyup.enter="login()" />
                    <input type="button" class="btn-login" @click="login()" value="登 录" />
                </form>
            </div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</template>
<script>
import { mapMutations } from 'vuex';
import { accountSignin } from '../service/account';

export default {
    data() {
        return {
            userName: '',
            password: '',
        };
    },
    methods: {
        ...mapMutations([
            'ACCOUNTSIGNIN',
        ]),
        validate() {
            /* eslint-disable */
            let data = {};
            if (!this.userName || this.userName.length > 6) {
                this.$Message.error('用户名非法!', 5);
                return false;
            } else {
                data.userName = this.userName;
            }
            if (!this.password || this.password.length < 6) {
                this.$Message.error('密码非法!', 5);
                return false;
            } else {
                data.password = this.password;
            }
            return data;
            /* eslint-enable */
        },
        login() {
            let user = true || this.validate();
            if (user) {
                this.ACCOUNTSIGNIN({ userid: 1000, name: 'Admin' });
                this.$router.push('/index');
            }
        },
    },
    mounted() {
        this.$Notice.info({
            title: '测试用户',
            desc: '任意用户名，任意密码 二者大于6位',
            duration: 15,
        });
    },
};
</script>

<style scoped lang="less">
@keyframes square {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        bottom: 100%;
        transform: rotate(600deg);
        -webit-transform: rotate(600deg);
        -webkit-transform: translateY(-500);
        transform: translateY(-500)
    }
}

.login-bg {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    background-color: #141a48;
    background-image: url(../assets/images/login/login_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.wrap {
    width: 100%;
    height: 100%;
    padding: 40px 0;
    position: fixed;
    opacity: 0.8;
    overflow: hidden;
    ul {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -10;

        li {
            list-style-type: none;
            display: block;
            position: absolute;
            bottom: -120px;
            width: 15px;
            height: 15px;
            z-index: -8;
            background-color: rgba(255, 255, 255, 0.15);
            animation: square 25s infinite;
            &:nth-child(1) {
                left: 0;
                animation-duration: 10s;
                -webkit-animation-duration: 10s;
            }

            &:nth-child(2) {
                width: 40px;
                height: 40px;
                left: 10%;
                animation-duration: 15s;
            }

            &:nth-child(3) {
                left: 20%;
                width: 25px;
                height: 25px;
                animation-duration: 12s;
            }

            &:nth-child(4) {
                width: 50px;
                height: 50px;
                left: 30%;
                animation-delay: 3s;
                animation-duration: 14s;
            }

            &:nth-child(5) {
                width: 60px;
                height: 60px;
                left: 40%;
                animation-duration: 11s;
            }

            &:nth-child(6) {
                width: 75px;
                height: 75px;
                left: 50%;
                animation-delay: 7s;
            }

            &:nth-child(7) {
                left: 60%;
                animation-duration: 8s;
            }

            &:nth-child(8) {
                width: 90px;
                height: 90px;
                left: 70%;
                animation-delay: 4s;
            }

            &:nth-child(9) {
                width: 100px;
                height: 100px;
                left: 80%;
                animation-duration: 20s;
            }

            &:nth-child(10) {
                width: 120px;
                height: 120px;
                left: 90%;
                animation-delay: 6s;
                animation-duration: 30s;
            }
        }
    }
}

.container {
    width: 60%;
    margin: 0 auto;
    margin-top: -200px;
    top: 50%;
    position: relative;
    h1 {
        text-align: center;
        color: #FFFFFF;
        font-weight: 500;
    }
    input {
        width: 320px;
        display: block;
        height: 36px;
        border: 0;
        outline: 0;
        padding: 6px 10px;
        line-height: 24px;
        margin: 32px auto;
        transition: all 0s ease-in 0.1ms;
        &:focus {
            width: 350px;
        }
    }

    input[type="text"],
    input[type="password"] {
        background-color: #FFFFFF;
        font-size: 16px;
        color: #50a3a2;
    }

    .btn-login {
        font-size: 16px;
        letter-spacing: 2px;
        color: #666666;
        background-color: #FFFFFF;
        text-align: center;
        &:hover {
            cursor: pointer;
            width: 350px;
        }
    }
}
</style>
